﻿<!DOCTYPE html>
<html>
<head>
    <title>所有栏目</title>
    $css()   
    $iconcss()
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0" width="100%" height="100%">
            <tr>
                <td width="250" valign="top">
                    <div style="padding:20px 20px 0 20px">
                        <input type="button" class="button" value="新建栏目" id="btn_create" />
                        <input type="button" class="button" value="收起栏目" id="btn_collage" />
                    </div>
                        <div id="dg" style="padding:20px"></div>
                </td>
                <td valign="top">
                    <div class="formPanel">
                        <div id="pl" class="panel helpPanel relative autoHeight autoScroll">
                            <h2>操作帮助</h2>
                            <div class="line"></div>
                            <ol>
                                <li>点击“新增栏目”按钮进行栏目添加。</li>
                                <li>点击栏目可进行栏目修改。</li>
                                <li>鼠标右键点击栏目，可进行栏目其他操作。</li>
                                <li>点击展开栏目，可以展开所有栏目，点击收起栏目，可以折叠所有栏目。</li>
                            </ol>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>


    <script type="text/template" id="list_menu_tpl">
        <div class="item" onclick="menu.add()">
            <a href="javascript:;">$icon(create)新建栏目</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>

    <script type="text/template" id="tpl">
        <div class="item" onclick="menu.add('%id%')">
            <a href="javascript:;">$icon(create)新建子栏目</a>
        </div>
        <div class="item" onclick="menu.extend('%id%')">
            <a href="javascript:;" title="通过设置扩展属性，可以提供更多的信息！">$icon(edit)扩展设置</a>
        </div>
        <div class="item" onclick="menu.del('%id%')">
            <a href="javascript:;">$icon(delete)删除</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>$js()
    <script type="text/javascript">
        var treePanel = cms.$('dg');
        var treeObj = null;
        var tmpTpl = cms.$('tpl').innerHTML;
        function _showCategory(e, d, t) {
            var id = cms.toJson(d).lft;
            cms.load2('pl', 'category', 'update', 'lft=' + id);
        }

        //加载栏目树
        function _thisLoadCategoryTree() {
            cms.xhr.request({
                uri: '?module=ajax&action=CategoryNodes',
                method: 'GET',
                data: 'json'
            }, {
                success: function (json) {
                    treeObj = cms.tree.load(treePanel, json, '/framework/assets/tree/', _showCategory);
                    var nodeLinks;
                    cms.each(treePanel.getElementsByTagName('DIV'), function (i, e) {
                        if (e.className == 'node') {
                            nodeLinks = e.getElementsByClassName
                                ? e.getElementsByClassName('node')
                                : document.getElementsByClassName('node', e);

                            if (nodeLinks.length != 0) {
                                var id = cms.toJson(nodeLinks[0].getAttribute('node-value')).lft;
                                cms.contextmenu.bind(e, null, function (menu) {
                                    menu.innerHTML = cms.template(tmpTpl, { id: id });
                                });
                            }
                        }
                    });
                }, error: function () {
                    treePanel.innerHTML = '<span class="error">栏目加载失败! </span>';
                }
            });
        }
        _thisLoadCategoryTree();

        //重新加载栏目树
        function _reloadTree() {
            if (parent._loadCategoryTree) parent._loadCategoryTree();
            if (window._thisLoadCategoryTree) window._thisLoadCategoryTree();
        }

        //创建
        Fn.create = function (id) {
            cms.load2('pl', 'category', 'create', id?'lft='+id:'');
        };


        cms.$('btn_create').onclick = function () {
            Fn.create();
        };

        cms.$('btn_collage').onclick = function () {
            if (this.value.indexOf('收起') != -1) {
                treeObj.closeAll();
                this.value = '展开栏目';
            } else {
                treeObj.openAll();
                this.value = '收起栏目';
            }
        };

        var menu = {
            add: Fn.create,
            extend: function (id) {
                var d = $JS.dialog.create2('扩展属性',true,true);
                d.open('?module=extend&action=category_check&lft=' + id,500,400);

            },
            del: function (id) {
                if (confirm('确定删除吗?删除后将不可恢复!')) {
                    cms.xhr.jsonPost('?', 'module=category&action=delete&lft=' + id,
                        function (json) {
                            if (json.result) {
                                _reloadTree();
                            } else { parent.M.alert(json.message); }
                        });
                }
            }
        };
    </script>

</body>
</html>
